<template>
  <Card>
    <div class="flexCSB">
      <div
        v-if="$store.state.superAdmin == 'true'"
        style="display: flex;align-items: center;margin-bottom:10px"
      >
        <p style="margin-right:10px">博物馆：</p>
        <Select style="width:320px" v-model="museumId" filterable @on-change="change">
          <template v-for="item in museumList">
            <Option :value="item.id">{{item.name}}</Option>
          </template>
        </Select>
      </div>
      <div style="display: flex;">
        <RadioGroup v-model="states" type="button" @on-change="change">
          <Radio label="0">全部</Radio>
          <Radio label="1">未审核</Radio>
          <Radio label="2">已通过</Radio>
          <Radio label="3">已拒绝</Radio>
        </RadioGroup>
        <div style="width:1.5px;height:32px;background-color: rgba(0,0,0,0.1);margin-left:20px"></div>
        <Button
          @click="pass"
          type="success"
          style="margin:0 10px 0 20px"
          :disabled="chooseData.length==0"
        >批量通过</Button>
        <Button @click="refuse" type="error" :disabled="chooseData.length==0">批量拒绝</Button>
      </div>
    </div>
    <Table
      @on-selection-change="onSelect"
      class="table"
      :loading="loading1"
      highlight-row
      :columns="columns"
      :data="data"
    ></Table>
    <Page
    show-total
      class="page"
      :total="total"
      :current.sync="current"
      show-elevator
      @on-change="changePage"
    />
    <Modal title="试听音频" v-model="listenModal">
      <audio style="width:100%" controls :src="prefix + listenUrl"></audio>
      <div slot="footer">
        <Button type="warning" class="Button" @click="listenModal = false">关闭</Button>
      </div>
    </Modal>
  </Card>
</template>

<script>
export default {
  data() {
    return {
      loading1: false,

      museumId: "",
      museumList: "",

      total: 0,
      current: 1,
      size: 10,
      states: "0",

      columns: [
        { type: "selection", width: 60, align: "center" },
        {
          title: "头像",
          key: "headImgUrl",
          align: "center",
          width: 100,
          render: (h, params) => {
            return h("img", {
              style: {
                width: "60px",
                marginTop: "6px"
              },
              attrs: {
                src: params.row.headImgUrl
              }
            });
          }
        },
        { title: "微信昵称", key: "nickName", align: "center" },
        { title: "微信openid", key: "openid", align: "center" },
        { title: "展品名称", key: "exhibitName", align: "center" },
        { title: "音频时长", key: "audioDuration2", align: "center" },
        { title: "审核状态", key: "states2", align: "center" },
        {
          title: "操作",
          align: "center",
          width: 100,
          render: (h, params) => {
            return h(
              "div",
              {
                style: {
                  padding: "10px 0"
                }
              },
              [
                h(
                  "Button",
                  {
                    props: {
                      type: "success",
                      disabled: params.row.states != 1 ? true : false
                    },
                    style: {
                      display: "block"
                    },
                    on: {
                      click: () => {
                        this.passAuth(params);
                      }
                    }
                  },
                  "通过"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "error",
                      disabled: params.row.states != 1 ? true : false
                    },
                    style: {
                      display: "block",
                      margin: "10px 0"
                    },
                    on: {
                      click: () => {
                        this.refuseAuth(params);
                      }
                    }
                  },
                  "拒绝"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "warning",
                      disabled: params.row.audioUrl == undefined
                    },
                    style: {
                      display: "block"
                    },
                    on: {
                      click: () => {
                        this.listen(params);
                      }
                    }
                  },
                  "试听"
                )
              ]
            );
          }
        }
      ],
      data: [],

      disabled: true,
      chooseData: [],

      listenModal: false,
      listenUrl: ""
    };
  },
  created() {
    if (this.$store.state.superAdmin == "true") {
      this.getMuseumList();
    } else {
      this.museumId = this.$store.state.museumId;
      this.getExhibitsAudioList();
    }
  },
  methods: {
    getMuseumList() {
      this.loading1 = true;
      this.$http("/stage/museum/getAppMuseumDropDown", {}, "post", res => {
        if (res.data.code == 200) {
          this.museumList = res.data.data;
          for (let i = 0; i < this.museumList.length; i++) {
            if (this.museumList[i].name.length > 20) {
              this.museumList[i].name =
                this.museumList[i].name.slice(0, 20) + "...";
            }
          }
          this.museumId = this.museumList[0].id;
          this.getExhibitsAudioList();
        } else {
          this.$Message.error(res.data.msg);
        }
      });
    },
    getExhibitsAudioList() {
      this.loading1 = true;
      this.$http(
        "/stage/audio/getExhibitsAudioList",
        {
          current: this.current,
          size: this.size,
          museumId: this.museumId,
          states: this.states == "0" ? "" : parseInt(this.states)
        },
        "post",
        res => {
          if (res.data.code == 200) {
            this.data = res.data.data.records;
            this.chooseData = [];
            for (let i = 0; i < this.data.length; i++) {
              if (this.data[i].states == 1) {
                this.data[i].states2 = "未审核";
                this.data[i]._disabled = false;
              } else {
                this.data[i]._disabled = true;
              }
              if (this.data[i].states == 2) {
                this.data[i].states2 = "审核通过";
              }
              if (this.data[i].states == 3) {
                this.data[i].states2 = "审核未通过";
              }
              if (this.data[i].audioDuration != undefined) {
                this.data[i].audioDuration2 = this.data[i].audioDuration + "s";
              }
            }
            this.total = res.data.data.total;
          } else {
            this.$Message.error(res.data.msg);
          }
          this.loading1 = false;
        }
      );
    },
    changePage() {
      this.getExhibitsAudioList();
    },
    change() {
      this.current = 1;
      this.getExhibitsAudioList();
    },
    onSelect(data) {
      this.chooseData = [];
      for (let i = 0; i < data.length; i++) {
        this.chooseData.push(data[i].id);
      }
    },
    pass() {
      this.$Modal.confirm({
        title: "提示",
        content: "<p>确定要批量通过所选录音吗？</p>",
        onOk: () => {
          this.loading1 = true;
          this.$http(
            "/stage/audio/passAuth",
            {
              ids: this.chooseData
            },
            "post",
            res => {
              if (res.data.code == 200) {
                this.$Message.success("批量审核通过成功");
                this.getExhibitsAudioList();
              } else {
                this.$Message.error(res.data.msg);
              }
              this.loading1 = false;
            }
          );
        },
        onCancel: () => {}
      });
    },
    refuse() {
      this.$Modal.confirm({
        title: "提示",
        content: "<p>确定要批量拒绝所选录音吗？</p>",
        onOk: () => {
          this.loading1 = true;
          this.$http(
            "/stage/audio/refuseAuth",
            {
              id: this.chooseData
            },
            "post",
            res => {
              if (res.data.code == 200) {
                this.$Message.success("批量审核拒绝成功");
                this.getExhibitsAudioList();
              } else {
                this.$Message.error(res.data.msg);
              }
              this.loading1 = false;
            }
          );
        },
        onCancel: () => {}
      });
    },
    passAuth(params) {
      this.$Modal.confirm({
        title: "提示",
        content: "<p>确定要通过此条录音吗？</p>",
        onOk: () => {
          this.loading1 = true;
          this.$http(
            "/stage/audio/passAuth",
            {
              ids: [params.row.id]
            },
            "post",
            res => {
              if (res.data.code == 200) {
                this.$Message.success("审核通过成功");
                this.getExhibitsAudioList();
              } else {
                this.$Message.error(res.data.msg);
              }
              this.loading1 = false;
            }
          );
        },
        onCancel: () => {}
      });
    },
    refuseAuth(params) {
      this.$Modal.confirm({
        title: "提示",
        content: "<p>确定要拒绝此条录音吗？</p>",
        onOk: () => {
          this.loading1 = true;
          this.$http(
            "/stage/audio/refuseAuth",
            {
              id: [params.row.id]
            },
            "post",
            res => {
              if (res.data.code == 200) {
                this.$Message.success("审核拒绝成功");
                this.getExhibitsAudioList();
              } else {
                this.$Message.error(res.data.msg);
              }
              this.loading1 = false;
            }
          );
        },
        onCancel: () => {}
      });
    },
    listen(params) {
      this.listenModal = true;
      this.listenUrl = params.row.audioUrl;
    }
  }
};
</script>

<style scoped>
</style>